import { Stack, Link, router } from 'expo-router';
import { Text, View, Pressable, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useAuth } from '../../utils/auth/authContext';

import { Container } from '../../components/Container';

export default function Home() {
  const { logout, user } = useAuth();

  const handleLogout = async () => {
    Alert.alert(
      '退出登录',
      '确定要退出登录吗？',
      [
        { text: '取消', style: 'cancel' },
        { 
          text: '确定', 
          onPress: async () => {
            await logout();
            router.replace('/login');
          } 
        }
      ]
    );
  };

  return (
    <>
      <Stack.Screen options={{ 
        title: '主页',
        headerRight: () => (
          <Pressable 
            onPress={handleLogout}
            className="pr-4 flex-row items-center"
          >
            <Text className="text-blue-500 mr-1">退出</Text>
            <Ionicons name="power" size={24} color="#3B82F6" />
          </Pressable>
        )
      }} />
      <Container>
        <View className="flex-1 p-6 bg-gray-100">
          <View className="flex-row justify-between items-center mb-6">
            <Text className="text-3xl font-bold text-gray-800">报销助手</Text>
            {user && (
              <Text className="text-gray-600">欢迎, {user.name}</Text>
            )}
          </View>
          
          <View className="gap-4">
      
            <Link href="/themes" asChild>
              <Pressable
                className="bg-white p-5 rounded-2xl flex-row items-center border border-gray-200"
              >
                <View className="w-12 h-12 bg-green-100 rounded-full items-center justify-center mr-4">
                  <Ionicons name="folder-outline" size={24} color="#10B981" />
                </View>
                <View className="flex-1">
                  <Text className="text-lg font-bold text-gray-800">报销主题</Text>
                  <Text className="text-gray-500">管理您的报销主题和参与人</Text>
                </View>
                <Ionicons name="chevron-forward" size={24} color="#9CA3AF" />
              </Pressable>
            </Link>
          </View>
        </View>
        
        <Link href="/themes/new" asChild>
          <Pressable 
            className="absolute bottom-6 right-6 w-14 h-14 bg-blue-500 rounded-full items-center justify-center"
            style={{ elevation: 5 }}
          >
            <Ionicons name="add" size={30} color="white" />
          </Pressable>
        </Link>
      </Container>
    </>
  );
} 